import React, { Component } from 'react'
import '@/assets/style/app.scss'
import {order} from '@/utils/ary'
export default class App extends Component {
  constructor(){
    super()
    this.state={
      isShow:false,
      house:{
        no:'10001',
        name:'万科',
        price:'21000',
        address:'未央路1号',
        type:1,
        isEditor:false
      },
      houses:[]
    }
  }
  //受控组件收集添加楼盘的表单信息
  handle=(e)=>{
    const newhouse=this.state.house
    newhouse[e.target.name]=e.target.value
    this.setState({
      house:newhouse
    })
  }

  handle2=(id,e)=>{
     const newhouseList=this.state.houses.map(item=>{
        if(id===item.no){
          item[e.target.name]=e.target.value
        }
        return item
     })
     this.setState(()=>{
      return{
        houses:newhouseList
      }
     },()=>{
      console.log('newhouseList',newhouseList);
     })
  }

  //添加楼盘信息
  addHouse=()=>{
    this.state.houses.push({...this.state.house})
    this.setState(()=>{
      return{
        houses:this.state.houses
      }
    })
  }
  //用来显示类型
  getTypeName=(arg)=>{
    switch(arg){
      case 1:return '住宅'
      case 2:return '商铺'
      case 3:return '别墅'
      default: return '位置'
    }
  }

  //排序方法
  sortOrder=(field,type)=>{
    const newhouses=this.state.houses.sort(order(field,type))
    this.setState({
      houses:newhouses
    })

  }

  updateHouse=(id,op)=>{
    if(op==="editor"){
      const newHouses=this.state.houses.map(item=>{
        if(item.no===id){
          item.isEditor=true
        }
        return item
      })
      this.setState({
        houses:newHouses
      })
    }else if(op==="confirm"){
      const newHouses=this.state.houses.map(item=>{
        if(item.no===id){
          item.isEditor=false
        }
        return item
      })
      this.setState({
        houses:newHouses
      })
    }
  }
  //楼盘列表渲染
  get renderHouseList(){
    if(this.state.houses&&this.state.houses.length>0){
      const houseVNodeList=this.state.houses.map((item,index)=><tr key={index}>
        <td>{item.no}</td>
        <td>
          {item.isEditor?<input value={item.name} onChange={(e)=>{this.handle2(item.no,e)}} name="name"/>:item.name}
        </td>
        <td>
          {item.isEditor?<input value={item.price} onChange={(e)=>{this.handle2(item.no,e)}} name="price"/>:item.price}
        </td>
        <td>
          {item.isEditor?<input value={item.address} onChange={(e)=>{this.handle2(item.no,e)}} name="address"/>:item.address}
        </td>
        <td>{this.getTypeName(item.type)}</td>
        <td>{!item.isEditor?<button onClick={()=>{this.updateHouse(item.no,'editor')}}>编辑</button>:<button onClick={()=>{this.updateHouse(item.no,'confirm')}}>确认</button>}</td>
      </tr>)
      return houseVNodeList
    }else{
      return <tr><td colSpan={6}>暂无数据</td></tr>
    }
  }
  get renderHouseListTilte(){
    return (<table>
      <thead>
         <tr>
            <td>编号</td>
            <td>名称</td>
            <td>
              <span>价格</span>|
              <span className='sort' onClick={()=>{this.sortOrder('price','asc')}}>升序</span>|
              <span className='sort' onClick={()=>{this.sortOrder('price','desc')}}>降序</span>
            </td>
            <td>地址</td>
            <td>类型</td>
            <td>操作</td>
         </tr>
      </thead>
      <tbody>
        {this.renderHouseList}
      </tbody>
    </table>)
  }
  //模拟计算属性，用来实现模态框显示的方法
  get renderDialog(){
    const {no,name,price,address,type}=this.state.house
    if(this.state.isShow){
      return(<div className='dialog'>
        <div className='dialog-title'>
            <div>添加楼盘</div>
            <div className='close' onClick={()=>{this.setState({isShow:false})}}>&times;</div>
        </div>
        <div className='dialog-body'>
           <div>
             <label htmlFor="">编号:</label>
             <input type="text" placeholder='请输入楼盘编号' value={no} name="no" onChange={this.handle}/>
           </div>
           <div>
             <label htmlFor="">名称:</label>
             <input type="text" placeholder='请输入楼盘名称' value={name} name='name' onChange={this.handle}/>
           </div>
           <div>
             <label htmlFor="">价格:</label>
             <input type="text" placeholder='请输入楼盘价格' value={price} name='price' onChange={this.handle}/>
           </div>
           <div>
             <label htmlFor="">地址:</label>
             <input type="text" placeholder='请输入楼盘地址' value={address} name='address' onChange={this.handle}/>
           </div>
           <div>
             <label htmlFor="">类型:</label>
             <input type="radio" value={1} defaultChecked name="type" onChange={this.handle}/>住宅
             <input type="radio" value={2} name="type" onChange={this.handle}/>商铺
             <input type="radio" value={3} name="type" onChange={this.handle}/>别墅
           </div>
           <div>
             <button onClick={this.addHouse}>确认</button>
             <button>重置</button>
           </div>
        </div>
      </div>)
    }else{
      return <></>
    }
  }
  render() {
    return (
      <div>
          <div>
            <button onClick={()=>{this.setState({isShow:true})}}>添加楼盘信息</button>
          </div>
          <div>
            {this.renderDialog}
          </div>
          <div>
             {this.renderHouseListTilte}
          </div>
      </div>
    )
  }
}
